<template>
  <div id="secondEchartsright" class="homeEchartsClass"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
 this.$nextTick(() => {
    this.myChart = echarts.init(document.getElementById("secondEchartsright"));

  })
  window.addEventListener("resize", () => {
  	// 判断是否存在，直接调用resize方法
    if (this.myChart) this.myChart.resize()
  })

    let chartDom = document.getElementById("secondEchartsright");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      color: ["#CF2AE0", "#5729E5", "#2475DE", "#2DDFA0"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
        formatter: (params) => {
          // 获取xAxis data中的数据
          let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`;
          params.forEach((item) => {
            dataStr += `<div>
          <div style="margin: 0 8px;">
         
            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
           
            <span>${item.seriesName}</span>
           
            <span style="float:right;margin-left:20px;font-weight:600">${item.data}</span>
          </div>
        </div>`;
          });
          return dataStr;
        },
      },
      legend: {
        itemHeight: 10,
        itemWidth: 10,
        itemGap: 20,
        orient: "horizontal",
        bottom: 0,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "8%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        axisTick: {
          show: false,
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "全部中断",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [8, 4, 6, 7, 8, 2, 3, 4, 1, 6, 9, 5],
        },
        {
          name: "部分中断",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [8, 2, 3, 4, 1, 6, 9, 4, 1, 6, 9, 5],
        },
        {
          name: "刷新",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [8, 2, 3, 4, 1, 6, 9, 4, 1, 6, 9, 4, 1],
        },
        {
          name: "不中断业务",
          type: "bar",
          stack: "total",
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: [2, 7, 4, 1, 6, 9, 4, 1, 9, 6, 2, 4],
        },
      ],
    };

    option && myChart.setOption(option);
  },
      watch: {
   "$store.state.app.sidebar.opened"() {
       setTimeout(() => {
           this.myChart.resize()
       }, 300)
   }
}
};
</script>

<style lang='scss' scoped>
.homeEchartsClass {
  width: 100%;
  height: 100%;
}
</style>

